{% extends 'base_page.html' %}


{% block title %}
    话题分析
{% endblock %}



{% block  nav %}
    <nav class="iq-sidebar-menu">
        <ul id="iq-sidebar-toggle" class="side-menu">
            <li class="px-3 pt-3 pb-2 ">
                <span class="text-uppercase small font-weight-bold">首页</span>
            </li>
            <li class=" sidebar-layout">
                <a href="/page/home" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                    </i>
                    <span class="ml-2">首页</span>
                </a>
            </li>
            <li class=" sidebar-layout">
                <a href="/page/articleData" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                        </svg>
                    </i>
                    <span class="ml-2">微博文章</span>
                </a>
            </li>
            <li class=" sidebar-layout">
                <a href="/page/commentsData" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6"></path>
                        </svg>
                    </i>
                    <span class="ml-2">微博评论</span>
                </a>
            </li>
            <li class=" sidebar-layout">
                <a href="/page/topic" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                        </svg>
                    </i>
                    <span class="ml-2">微博热门话题</span>
                </a>
            </li>
            <li class="px-3 pt-3 pb-2 ">
                <span class="text-uppercase small font-weight-bold">数据分析</span>
            </li>
            <li class=" sidebar-layout">
                <a href="/page/articleChar" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"></path>
                        </svg>
                    </i>
                    <span class="ml-2">文章分析</span>
                </a>
            </li>
            <li class=" sidebar-layout">
                <a href="/page/yuqingChar" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                    </i>
                    <span class="ml-2">分析</span>
                </a>
            </li>
            <li class="active sidebar-layout">
                <a href="/page/analysisTopic" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                        </svg>
                    </i>
                    <span class="ml-2">热门话题分析</span>
                </a>
            </li>
            <li class="px-3 pt-3 pb-2">
                <span class="text-uppercase small font-weight-bold">数据管理</span>
            </li>
            <li class=" sidebar-layout">
                <a href="/page/spiderData" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                    </i><span class="ml-2">爬取数据</span>
                </a>
            </li>
            <li class=" sidebar-layout">
                <a href="/page/articleData_temp" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                        </svg>
                    </i><span class="ml-2">爬取结果</span>
                </a>
            </li>
            <li class=" sidebar-layout">
                <a href="/page/updateData" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
                        </svg>
                    </i><span class="ml-2">文章数据更新</span>
                </a>
            </li>
            <li class=" sidebar-layout">
                <a href="/page/deleteData" class="svg-icon">
                    <i class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                        </svg>
                    </i><span class="ml-2">数据删除</span>
                </a>
            </li>
        </ul>
    </nav>
{% endblock %}



{% block content %}
    <div class="row">
        <div class="col-lg-12">
            <h2 class="text-blue center"> 话题名称：{{ ciTiao }}</h2>
        </div>


        <div class="col-lg-12">
            <div class="card card-block">
                <div class="card-header d-flex justify-content-between pb-0">
                    <div class="header-title">
                        <h4 class="card-title mb-0">情感占比柱状图</h4>
                    </div>
                </div>
                <div class="card-body">
                    <div id="main" style="width: 100%;height: 450px"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="card card-block">
                <div class="card-header d-flex justify-content-between pb-0">
                    <div class="header-title">
                        <h4 class="card-title mb-0">词云图</h4>
                    </div>
                </div>
                <div class="card-body">
                    <div style="width:100%;height: 100%;text-align: center">
                        <img style="width:80%" src="/static/wordCloud_2/{{ ciTiao }}.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="card card-block">
                <div class="card-header d-flex justify-content-between pb-0">
                    <div class="header-title">
                        <h4 class="card-title mb-0">微博话题情绪走势</h4>
                    </div>
                </div>
                <div class="card-body">
                    <div id="mood_trend" style="width: 100%;height: 450px"></div>
                </div>
            </div>
        </div>


    </div>
{% endblock %}


{% block echarts %}
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        var colors = ['#66CC99', '#FFCC66', '#FF6666', '#91B5DE', '#FF9898', '#E2E475'];
        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Rainfall']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    // prettier-ignore
                    data: {{ names | tojson }}
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '情感个数',
                    type: 'bar',
                    data: {{ nums }},
                    markPoint: {
                        data: [
                            {type: 'max', name: 'Max'},
                            {type: 'min', name: 'Min'}
                        ]
                    },
                    itemStyle: {
                        color: function (parmas) {
                            return colors[parmas.dataIndex % colors.length];
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);

    </script>

    <script>
        var chartDom = document.getElementById('mood_trend');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: {{ legend | tojson }}
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: {{ dates | tojson }}
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '愤怒',
                    type: 'line',
                    stack: 'Total',
                    data: {{ fn|tojson }}
                },
                {
                    name: '惊奇',
                    type: 'line',
                    stack: 'Total',
                    data: {{ jq|tojson }}
                },
                {
                    name: '悲伤',
                    type: 'line',
                    stack: 'Total',
                    data: {{ bs|tojson }}
                },
                {
                    name: '恐惧',
                    type: 'line',
                    stack: 'Total',
                    data: {{ kj|tojson }}
                },
                {
                    name: '积极',
                    type: 'line',
                    stack: 'Total',
                    data: {{ xy|tojson }}
                },
                {
                    name: '中性',
                    type: 'line',
                    stack: 'Total',
                    data: {{ zx|tojson }}
                }
            ]
        };
        option && myChart.setOption(option);
    </script>
{% endblock %}